<template>
  <div ref="baseDrawer" class="base-drawer">
    <div class="base-drawer-header">
      <h2>{{ title }}</h2>
      <el-icon class="close-icon" @click="closeDrawer">
        <CloseBold v-if="title === '灯具详情'" />
        <Fold v-else />
      </el-icon>
    </div>
    <div class=" base-drawer-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  showDrawer: {
    type: Boolean,
    default: false,
  },
});

const baseDrawer = ref('baseDrawer');

watch(() => props.showDrawer, (nval) => {
  baseDrawer.value.classList.toggle('slider');
});

const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  emit('closeDrawer')
};

</script>
<style scoped>
.slider {
  transform: translateX(-100%) !important;
}

.base-drawer {
  background-color: #fff;
  width: 35rem;
  height: 100%;
  transition: transform 0.55s ease-in-out;
  transform: translateX(0%);
  background-color: #313131;

  .base-drawer-header {
    display: flex;
    justify-content: space-between;
    height: 3rem;
    padding: 1rem 1rem 0rem 1rem;
    background-color: #161616;
  }

  .base-drawer-body {
    height: 100%;
    background-color: #313131;
    padding: 0.5rem;
  }

  .close-icon {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 0.5rem;
  }
}
</style>